<template>
  <div>
    <Header></Header>
    <section
      data-test="page-section"
      data-section-theme="black"
      class="page-section layout-engine-section background-width--full-bleed section-height--small content-width--medium horizontal-alignment--center vertical-alignment--middle has-background softwareMain black"
      data-section-id="607bf7274e53660217010cd5"
      data-controller="SectionWrapperController"
      data-animation="none"
      data-controllers-bound="SectionWrapperController"
      style="padding-top: 264px"
      data-active="true"
    >
      <div class="section-border">
        <div class="section-background" style="top: 267.656px">
          <img
            alt=""
            data-src="../../assets/imgs/SMART_Banner.jpeg"
            data-image="../../assets/imgs/SMART_Banner.jpeg"
            data-image-dimensions="952x633"
            data-image-focal-point="0.4230769230769231,0.3475685016045421"
            data-load="false"
            elementtiming="nbf-background"
            src="../../assets/imgs/SMART_Banner.jpeg"
            width="952"
            height="633"
            sizes="(max-width: 799px) 200vw, 100vw"
            style="
              display: block;
              object-position: 42.30769230769231% 34.75685016045421%;
            "
            srcset="
              ../../assets/imgs/SMART_Banner.jpeg?format=100w   100w,
              ../../assets/imgs/SMART_Banner.jpeg?format=300w   300w,
              ../../assets/imgs/SMART_Banner.jpeg?format=500w   500w,
              ../../assets/imgs/SMART_Banner.jpeg?format=750w   750w,
              ../../assets/imgs/SMART_Banner.jpeg?format=1000w 1000w,
              ../../assets/imgs/SMART_Banner.jpeg?format=1500w 1500w,
              ../../assets/imgs/SMART_Banner.jpeg?format=2500w 2500w
            "
            fetchpriority="high"
            loading="eager"
            decoding="async"
            data-loader="sqs"
          />
          <div class="section-background-overlay" style="opacity: 0.08"></div>
        </div>
      </div>
      <div class="content-wrapper" style="">
        <div class="content">
          <div
            class="sqs-layout sqs-grid-12 columns-12"
            data-type="page-section"
            id="page-section-6073ff55c64f9762a2a3667b"
          >
            <div class="row sqs-row">
              <div class="col sqs-col-12 span-12">
                <div
                  class="sqs-block html-block sqs-block-html"
                  data-block-type="2"
                >
                  <div class="sqs-block-content">
                    <div class="sqs-html-content">
                      <h2
                        style="
                          text-align: center;
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.264s;
                        "
                        class="preScale scaleIn h2-1"
                      >
                        Record body temperature 24 hours a day
                      </h2>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      data-test="page-section"
      data-section-theme=""
      class="page-section layout-engine-section background-width--full-bleed section-height--small content-width--medium horizontal-alignment--center vertical-alignment--middle"
    >
      <div class="content-wrapper">
        <div class="content">
          <div class="row sqs-row">
            <div class="col sqs-col-12 span-12">
              <div class="link-img">
                <div>
                  <div class="link-box">
                    <router-link class="link-1" to="/productsmenu"
                      >Full Product Menu</router-link
                    >
                  </div>
                  <div class="img-box">
                    <img
                      data-stretch="false"
                      data-src="../../assets/imgs/smart3.png"
                      data-image="../../assets/imgs/smart3.png"
                      data-image-dimensions="1228x888"
                      data-image-focal-point="0.5,0.5"
                      alt="图片.png3.png"
                      data-load="false"
                      elementtiming="system-image-block"
                      src="../../assets/imgs/smart3.png"
                      width="1228"
                      height="888"
                      sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw"
                      style="
                        display: block;
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                        object-position: 50% 50%;
                      "
                      onload='this.classList.add("loaded")'
                      srcset="
                        ../../assets/imgs/smart3.png?format=100w   100w,
                        ../../assets/imgs/smart3.png?format=300w   300w,
                        ../../assets/imgs/smart3.png?format=500w   500w,
                        ../../assets/imgs/smart3.png?format=750w   750w,
                        ../../assets/imgs/smart3.png?format=1000w 1000w,
                        ../../assets/imgs/smart3.png?format=1500w 1500w,
                        ../../assets/imgs/smart3.png?format=2500w 2500w
                      "
                      loading="lazy"
                      decoding="async"
                      data-loader="sqs"
                      class="loaded"
                    />
                  </div>
                </div>
                <div class="img-box">
                  <img
                    data-stretch="false"
                    data-image-dimensions="1020x1034"
                    data-image-focal-point="0.5,0.5"
                    alt="Body Temp 1.png"
                    data-load="false"
                    elementtiming="system-image-block"
                    src="../../assets/imgs/3.jpg"
                    width="1020"
                    height="1034"
                    sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw"
                    style="
                      display: block;
                      object-fit: cover;
                      width: 100%;
                      height: 100%;
                      object-position: 50% 50%;
                    "
                    onload='this.classList.add("loaded")'
                    loading="lazy"
                    decoding="async"
                    data-loader="sqs"
                    class="loaded"
                  />
                </div>
              </div>
              <div class="tip1-botm">
                <h3><strong>Flexible SMART Thermometer</strong></h3>
              </div>
              <div class="tip2">
                <p><em>Bluetooth Connected</em></p>
              </div>
              <div class="tip2">
                <p>
                  The flexible smart thermometer is an easy-to-use, comfortable
                  to wear, Bluetooth-connected thermometer. Based on the
                  supporting App, the thermometer can record body temperature 24
                  hours a day, and multi-user remote monitoring and monitoring
                  can be realized through the repeater hardware e-box.
                </p>
              </div>
              <div class="tip2">
                <p>
                  It is a disposable, disposable and non-recyclable thermometer,
                  which can effectively avoid the risk of cross-infection by
                  users.
                </p>
              </div>
              <div class="tip2">
                <p>Comfortable to wear, painless to tear</p>
              </div>
              <div class="tip2">
                <p>Safe and accurate, high temperature warning</p>
              </div>
              <div class="tip2">
                <p>
                  Centralised monitoring mode: It can monitor the body
                  temperature data of tens of thousands of patients in real time
                  24 at the same time, and each patch can be used continuously
                  for 30 days. Home monitoring mode: connect the body
                  temperature sticker through the mobile phone, and one account
                  can monitor the body temperature of three users at the same
                  time.
                </p>
              </div>
              <div class="tip2">
                <p>
                  It can monitor the user's body temperature in real time for 24
                  hours, and can monitor the user's location and the user's
                  activity track in real time. Through the background, remote
                  diagnosis and treatment can be communicated with users to
                  avoid contact with infection.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../../components/header.vue";
import Footer from "../../components/footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>
<style scoped>
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  h1 {
    /* font-size: calc((4 - 2)* 1.2vw + 1rem); */
  }
  h2 {
    font-size: calc(1.8 * 1.2vw + 1rem);
    font-weight: 500;
  }
  .h1-1 {
    font-size: calc((4 - 1) * 1.2vw + 1rem);
  }
}
@media screen and (min-width: 768px) {
  .content {
    width: 75%;
  }
}
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  h3 {
    font-size: calc(1.1 * 1.2vw + 1rem);
  }
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.page-section.section-height--medium:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  min-height: 66vh;
}
.section-background {
  overflow: hidden;
  pointer-events: none;
}
.page-section.background-width--inset:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  padding-top: 4vw;
  padding-right: 4vw;
  padding-bottom: 4vw;
  padding-left: 4vw;
}
.section-background,
.section-background .section-background-content,
.section-background .section-background-canvas,
.section-background .section-background-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.background-width--inset:not(.content-collection):not(.gallery-section):not(
    .user-items-list-section
  )
  .section-background {
  top: 4vw;
  right: 4vw;
  bottom: 4vw;
  left: 4vw;
  /* position: absolute; */
}
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
  clear: both;
}
.sqs-row::before,
.sqs-row::after {
  content: "";
  display: block;
  clear: both;
}
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3),
.sqs-block-html .sqs-html-content *:not(h1):not(h2):not(h3) {
  word-wrap: break-word;
}
.tradiTip1 {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 70%;
  left: 20%;
}
.section-background img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.section-background img {
  position: relative;
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
h1 {
  color: #fff;
}
h1 {
  text-align: center;
  white-space: pre-wrap;
  transition-timing-function: ease;
  transition-duration: 0.65s;
  transition-delay: 0.32s;
}
.h2-1 {
  margin-top: 0;
  margin-bottom: 0;
  color: #fff;
}
.page-section.vertical-alignment--middle:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section):not(.editmode-changing-rowcount) {
  align-items: center;
}
.page-section.section-height--small:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  min-height: inherit;
}
.sqs-col-12 {
  width: 100%;
}
.link-img {
  display: flex;
}
.link-box {
  padding-bottom: 36px;
}
.link-1 {
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #000;
  font-size: 14px;
}
.img-box {
  max-width: 390px;
  margin: 0 auto;
}
.tip1-botm {
  padding-bottom: 17px;
  text-align: center;
}
.tip1 h3 {
  margin-bottom: 0;
  text-align: center;
}
.tip2 {
  /* padding-bottom: 17px; */
  word-wrap: break-word;
  color: #333;
  font-family: poppins;
  font-weight: 300;
  line-height: 30px;
}
.tip3 p {
  margin: 17px 0;
  color: rgb(0, 36, 82);
}
.h3Css {
  padding-bottom: 0;
}
.h3Css h3 {
  text-align: left;
}
@media screen and (max-width: 767px) {
  .content [class*="sqs-col"] {
    float: none !important;
    width: 100% !important;
    /* padding-left: 17px; */
  }
  .sqs-row {
    /* width: 100vw; */
  }
  .link-img {
    display: block;
  }
  .link-img > div {
    margin-bottom: 20px;
  }
}
</style>
